import { onMounted, ref } from "vue"
import { objectAny } from "../../options/base";
import { getMoment } from "../../utils/time";

type emitsNameRule=`statusChange`|`statusConfirm`
type emitsRule=(name:emitsNameRule,value:any)=>void
type renderDataRule=Array<{
    title:string;
    children:Array<{
        name:string;
        value:number|string;
        getVal?:(value:number)=>objectAny;
        key?:string
    }>
}>
/**
 * 根据查询天数得到精准的开始时间和结束时间
 * @param {number} value - 需要计算的天数 
 * @returns 计算后开始毫秒和结束毫秒
 */
function getTimeRealVal(value:number):objectAny{
    // 获取到当时的时间
    const nowTimeMs=+new Date()
    // 计算得到需要的时间戳
    const diffMs=nowTimeMs+value*1000*60*60*24;

    return {
        start:diffMs,
        end:nowTimeMs
    }
}

export default {
    props:{
        initLoad:{
            type:Boolean,
            default:true
        }
    },
    setup(props:any,setupContext:any ) {
        const emit:emitsRule=setupContext.emit
        // 是否展示下拉筛选框
        const showFilterDropdown=ref(false);
        // 筛选条件渲染数据
        const renderData=ref<renderDataRule>([
            {
                title:`按时间选择`,
                children:[{
                    name:`最近三天`,
                    value:-3,
                    getVal:getTimeRealVal,
                },{
                    name:`最近五天`,
                    value:-5,
                    getVal:getTimeRealVal
                },{
                    name:`最近一周`,
                    value:-7,
                    getVal:getTimeRealVal
                },{
                    name:`近半个月`,
                    value:-15,
                    getVal:getTimeRealVal
                },{
                    name:`近一个月`,
                    value:-30,
                    getVal:getTimeRealVal
                }]
            },
            {
                title:`按服务选择`,
                children:[{
                    name:`跑腿/代取`,
                    value:`runErrand`,
                    key:`module`
                },{
                    name:`美食/外卖`,
                    value:`foodTakeout`,
                    key:`module`
                }]
            }
        ])
        // 可用于查询的数据及页面上被选择的数据
        const selectInfo=ref({
            selectVals:[    //默认数据 选择第一个
                renderData.value[0].children[0].value,  
                renderData.value[1].children[0].value
            ]
        })
        onMounted(()=>{
            // 初始化时 构建查询参数
            if(props.initLoad){
                confirmSelect(true);
            }
        })
        // 用于页面上选中某个选项
        function selectItem(parentIndex:number,selectValue:number){
            selectInfo.value.selectVals[parentIndex]=selectValue;
        }
        // 自动切换显示与隐藏
        function auto(show:boolean|undefined){
            // 不传值 变成自动模式
            if(show==null){
                showFilterDropdown.value=!showFilterDropdown.value;
            }else{
                showFilterDropdown.value=show;
            }
            emit(`statusChange`,showFilterDropdown.value);
        }
        // 选择确定时
        function confirmSelect(initLoad:boolean=false){
            // 创建选中的渲染容器 存放最终的数据
            const selectRealValList:Array<objectAny>=[];
            const selectValList=selectInfo.value.selectVals
            for(let k=0;k<selectValList.length;k++){
                const selectValue=selectValList[k];
                const list=renderData.value[k].children
                // 查询对应选择容器下和渲染容器下的数据
                for(let i=0;i<list.length;i++){
                    const {value,getVal,key}=list[i];
                    if(value===selectValue){
                        let resultData:objectAny={};
                        // 查询到了 进行数据格式化
                        if(getVal){
                            let args=value;
                            if(typeof value =='string'){
                                args=0;
                                console.error(`getTimeRealVal接收了string类型的参数无法正确计算天数 自动格式化为0`)
                            }
                            resultData=getVal(args as number);
                        }else{
                            const keyName=key?key:`key`
                            resultData[keyName]=value
                        }
                        selectRealValList.push(resultData)
                        break;
                    }
                }
            }
            auto(false);
            emit(`statusConfirm`,{
                selectRealValList,
                initLoad
            });
        }

        return {
            renderData,
            selectInfo,
            showFilterDropdown,
            auto,
            confirmSelect,
            selectItem
        }
    }
}